html,body{
    margin: 0px;
    padding: 0px;
}
*{
    margin: 0px;
    padding: 0px;
    font-family: "微软雅黑";
    text-decoration: none;
}
.section1{
    position: relative;
    overflow: hidden;
}
.section1 .nav{
    width: 100%;
    height:80px;
    position: absolute;
    background: #fcfcfc;
    border-bottom: 4px solid #ebebeb;
    z-index: 10;
}
.nav_con{
    width: 1200px;
    height: 80px;
    margin: 0 auto;
    border: 1px solid transparent;
}
.logo{
    margin-left: 100px;
    width: 130px;
    height: 68px;
    margin-top: 6px;
    background: url(../images/logo.png);
    margin-right: 105px;
    float: left;
}
.tabs{
    width: auto;
    float: left;
    margin-top: 30px;
    list-style: none;
}
.tabs li{
    float: left;
    text-align: center;
    height: 30px;
}
.tabs li a{
    display: block;
    padding-left: 2px;
    padding-right: 2px;
}
.tabs li a p{
    font-size: 12px;
    color: #666;
    height: auto;
    position: relative;
}
.tabs li a span{
    display: block;
    transform: scale(0.7);
    height:auto;
    color: #bbb;
    position: relative;
}
.contantus{
    margin-left: 30px;
    width: auto;
    float: left;
    margin-top: 22px;
}
.contantus p:nth-child(2){
    font-size: 18px;
}
.section1 .slide1{
    background: url(../images/1-1F2241J512261.jpg) 50% no-repeat;
}
.section1 .slide2{
    background: url(../images/1-1F111155415A2.jpg) 50% no-repeat;
}
.section1 .slide3{
    background: url(../images/1-161019151S4a7.jpg) 50% no-repeat;
}
.section2 h2{
    width: 1200px;
    margin: 0 auto;
    height: 50px;
    background: url(../images/latertit.jpg) no-repeat;
}
.lates{
    width: 1200px;
    margin: 15px auto;
    cursor: pointer;
}
.lates div{
    overflow: hidden;
}
.lates div img{
    transition: all linear .5s;
}
.lates div:hover>img{
    transform: scale(1.1);
}
.lates .left{
    float: left;
}
.lates .left div{
    float: left;
}
.lates .left div:nth-child(1){
    width: 240px;
    height:550px;
    position: relative;
    left: -100%;
    top: -100%;
    opacity: 0;
}
.lates .left div:nth-child(2){
    width: 480px;
    height:550px;
    position: relative;
    bottom: -600px;
    opacity: 0;
}
.lates .left div:nth-child(1) img{
    width: 240px;
    height: 550px;
}
.lates .left div:nth-child(2) img{
    width: 480px;
    height: 550px;
}
.lates .right>div:nth-child(1){
    position: relative;
    right: -100%;
    top: -100%;
    opacity: 0;
}
.lates .right>div:nth-child(1) div{
    float: left;
    width: 240px;
    height:240px;
}
.lates .right>div:nth-child(1) div img{
    width: 240px;
    height:240px;
}
.lates .right>div:nth-child(2){
    float: left;
    width: 480px;
    height:310px;
    position: relative;
    right: -100%;
    bottom:-100% ;
    opacity: 0;
}
.lates .right>div:nth-child(2) img{
    width: 480px;
    height: 310px;
}
.section3 h2{
    width: 1200px;
    margin: 0 auto;
    height: 50px;
    background: url(../images/wjtit.jpg) no-repeat;
}
#focusbox{
    width: 0px;
    margin: 0 auto;
    height:550px;
    overflow: hidden;
}
.focusBox{
    position: relative;
    width:0px;
    height:550px;
    overflow: hidden;
    margin: 0 auto;
}
.focusBox .pic{
    position:relative;
    z-index:0; }
.focusBox .pic img{
    width:0px;
    height:550px;
    display: block;
    margin: 0 auto;
}
.focusBox .hd{
    width:100%;
    position: absolute;
    bottom: 10px;
    text-align: center;
    font-size:0;
    z-index:1;
}
.focusBox .hd li{
    margin: 0 5px;
    background: url(../images/dot.png) no-repeat 0 -16px;
    height: 16px;
    overflow: hidden;
    width: 16px;
    cursor: pointer;
    display:inline-block;
    *display:inline; zoom:1;
    _background: url(../images/dot8.png) no-repeat 0 -16px;
}
.focusBox .hd .on{
    background-position:0 0;
}
.focusBox .prev,.focusBox .next{
    width: 50px;
    height: 90px;
    border-radius: 10px;
    margin: -60px 0 0;
    display: none;
    background: url(../images/ad_ctr.png) no-repeat 0 0;
    position: absolute;
    top: 50%;
    z-index: 10;
    cursor: pointer;
    text-indent: -9999px;
    filter:alpha(opacity=20);
    opacity:0.2;
}
.focusBox .prev{
    left: 0;
}
.focusBox .next{
    background-position: -10px -90px;
    right: 0;
}
.focusBox .prev:hover, .focusBox .next:hover{
    filter:alpha(opacity=50) !important;
    opacity:0.5 !important;
}
.outdoors{
    width: 1200px;
    height: 244px;
    margin: 50px auto;
}
.outdoors>div{
    width: 395px;
    height: 244px;
    float: left;
    margin-left: 7px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.outdoors>div:hover .f_fr{
    top: 0px;
    left: 0px;
}
.outdoors>div:hover .f_se{
    top: 0px;
    right: 0px;
}
.outdoors>div:hover .f_th{
    bottom: 0px;
    left: 0px;
}
.outdoors>div:hover .f_fo{
    bottom: 0px;
    right: 0px;
}
.four div{
    float: left;
    width: 197px;
    height: 122px;
    overflow: hidden;
    position: relative;
    transition: all 1s linear;
}
.four div:nth-child(odd){
    width: 198px;
}
.four div img{
    position: absolute;
    width: 395px;
    height:244px;
}
.f_fr{
    top: -100%;
    left: -100%;
}
.f_se{
    top: -100%;
    right: -100%;
}
.f_th{
    bottom: -100%;
    left: -100%;
}
.f_fo{
    bottom: -100%;
    right: -100%;
}
.f_fr img{
    top: 0px;
    left: 0px;
}
.f_se img{
    top: 0px;
    right: 0px;
}
.f_th img{
    left: 0px;
    bottom: 0px;
}
.f_fo img{
    right: 0px;
    bottom: 0px;
}

.outdoors div:nth-child(1){
    margin-left: 0px;
}
#sleetless{
    background: url(../images/1-161102152509127.jpg);
    left: -100%;
    top: -100%;
    opacity: 0;
}
#rose{
    background: url(../images/1-1611261953531D.jpg);
    opacity: 0;
}
#secret{
    background: url(../images/1-161126195542O4.jpg);
    right: -100%;
    bottom: -100%;
    opacity: 0;
}
#intro{
    width:0px;
    height:196px;
    overflow: hidden;
    margin: 100px auto 0px auto;
    position: relative;
}
#intro img{
    width: 1200px;
    height:196px;
}
.section5 h2{
    width: 1200px;
    height:50px;
    margin: 0 auto;
    background: url(../images/wjtit.jpg) no-repeat;
}
#inscence {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 0;
}
#inscence>div{
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    cursor: pointer;
    margin-top: 10px;
    position: relative;
    height:280px;
}
#ins1.ins:hover img{
    top: 150px;
    left:490px !important;
    z-index: 200;
    transform: scale(1.5);
}
#ins2.ins:hover img{
    top: 150px;
    left:190px !important;
    z-index: 200;
    transform: scale(1.5);
}
#ins3.ins:hover img{
     top: 150px;
     left:-110px !important;
     z-index: 200;
     transform: scale(1.5);
 }
#ins4.ins:hover img{
    top: 150px;
    left:-410px !important;
    z-index: 200;
    transform: scale(1.5);
}
#ins5.ins:hover img{
    top: -150px;
    left:490px !important;
    z-index: 200;
    transform: scale(1.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}
#ins6.ins:hover img{
    top: -150px;
    left:190px !important;
    z-index: 200;
    transform: scale(1.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}
#ins7.ins:hover img{
    top: -150px;
    left:-110px !important;
    z-index: 200;
    transform: scale(1.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}
#ins8.ins:hover img{
    top: -150px;
    left:-410px !important;
    z-index: 200;
    transform: scale(1.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}
#inscence div img{
    display: block;
    height:0px;
    width: 0px;
    margin: 0 auto;
    border-radius: 8px;
}
#inscence>div.anim{
    /*animation: rotate 1.1s linear;*/

}
#inscence>div.anim img{
    box-shadow: 0px 0px 8px  rgba(0,0,0,0.2);
}
@keyframes rotate {
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(90deg);
    }
    50%{
        transform: rotate(180deg);
    }
    75%{
         transform: rotate(270deg);
     }
    100%{
        transform: rotate(360deg);
    }
}
.section6{
    background: #efefef;
    overflow: hidden;
}
.section6 h2{
    width: 1200px;
    margin: 0 auto;
    height: 75px;
    background: url(../images/wdytit.jpg) no-repeat;
    margin-bottom: 100px;
}
.microflim{
    width: 1200px;
    height: 310px;
    margin: 0 auto;
}
.microflim>div{
    width: 394px;
    height:310px;
    float: left;
    margin-left: 8px;
    cursor: pointer;
}
.microflim>div:nth-child(1){
    margin-left: 0px;
}
.microflim .play{
    width: 394px;
    height: 260px;

}
.microflim .play img{
    width:394px;
    height: 260px;
}
.microflim .text{
    width: 394px;
    height:50px;
    background: #fff;
    text-align: center;
    color: #333;
    line-height: 50px;
    font-size: 18px;
}
#micro1{
    position: relative;
    left: -100%;
}
#micro2{
    position: relative;
    bottom: -400px;
}
#micro3{
    position: relative;
    right: -100%;
}
#micro1 .play{
    background: url(../images/1-161020120542448.jpg);
}
#micro2 .play{
    background: url(../images/1-161024114614M0.png);
}
#micro3 .play{
    background: url(../images/1-1611091114560-L.png);
}
.section7 h2{
    margin: 0 auto;
    width:1200px;
    height:50px;
    background: url(../images/custtit.jpg) no-repeat;
}
.customer{
    width:1200px;
    height:596px;
    margin: 0 auto;
}
.customer>div{
    float: left;
}
#cusleft{
    width: 596px;
    height:596px;
    background: url(../images/1-161019160921135.jpg);
    margin-right: 7px;
    position: relative;
    overflow: hidden;
    left: -100%;
    cursor: pointer;
}
#cusleft img{
    position: absolute;
    left:-100%;
    transition: all .5s linear;
}
#cusleft:hover img{
    left: 0px;
}
#cusrit1>div{
    float: left;
    width:294px;
    height:294px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
#cusrit1>div img{
    transition: all .5s linear;
    position: absolute;
    left: -100%;
}
#cusrit1>div:hover img{
    left:0px;
}
#cus1{
    top: -100%;
    left:-100%;
}
#cusrit1>div:nth-child(1){
    background:url(../images/1-161019160942158.jpg);
    margin-right: 8px;
}
#cusrit1>div:nth-child(2){
    background:url(../images/1-16101916095L49.jpg);
}
#cusrit1{
    width: 596px;
    height:294px;
    position: relative;
    overflow: hidden;
}
#cusrit2{
    margin-top: 8px;
    width: 596px;
    height:294px;
    position: relative;
    overflow: hidden;
}
#cusrit2>div{
    cursor: pointer;
    float: left;
    width:294px;
    height:294px;
    position: relative;
    overflow: hidden;
}
#cusrit2>div:nth-child(1){
    background:url(../images/1-161019161013436.jpg);
    margin-right: 8px;
}
#cusrit2>div:nth-child(2){
    background:url(../images/1-16101916102UI.jpg);
}
#cusrit2>div img{
    transition: all .5s linear;
    position: absolute;
    left: -100%;
}
#cusrit2>div:hover img{
    left:0px;
}
#cusright{
    width: 596px;
    height:596px;
    overflow: hidden;
}
#cus2{
    top: -100%;
    right:-100%;
}
#cus3{
    left: -100%;
    bottom: -100%;
}
#cus4{
    right: -100%;
    bottom: -100%;
}
.section8{
    background:#242424;
    position: relative;
}
.section8 h2{
    width: 1200px;
    height:200px;
    margin:  0 auto;
    background: url(../images/dsjtit.jpg) no-repeat center center;
}
#event{
    width:1200px;
    height:106px;
    margin:0 auto;
    margin-top: 30px;
    margin-bottom: 300px;
    overflow: hidden;
}
#event>div{
    width: 580px;
    height:106px;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
}
#event>div:hover{
    background: #efefef;
}
#event>div:nth-child(1){
    float: left;
    position: relative;
    left:-100%;
}
#event>div:nth-child(2){
    float: right;
    position: relative;
    right: -100%;
}
#event>div img{
    display: block;
    width: 90px;
    height:90px;
    float: left;
    margin: 8px;
}
.news{
    width: 444px;
    height:70px;
    margin: 20px 0px 0px 15px;
    float: left;
}
.news h5{
    font-weight: normal;
    font-size: 16px;
    color:#333;
}
.news p{
    font-size: 14px;
    color:#999;
}
.footer{
    width: 100%;
    height: 170px;
    background: #dc504f;
    position: absolute;
    bottom:100px;
}
.foot_content{
    width:0px;
    height: 170px;
    margin:0 auto;
    box-sizing: border-box;
    overflow: hidden;
}
#f_c1{
    width:433px;
    height:153px;
    background: url(../images/leftorder.jpg);
    float: left;
    margin-top: 10px;
}
#f_c2{
    width: 230px;
    height:170px;
    float: left;
}
#f_c2 form{
    width: 190px;
    height: 126px;
    margin: 20px auto;
}
#f_c2 form input{
    width: 172px;
    height:28px;
    display: block;
    margin-top: 6px;
    border-radius: 3px;
    border: 1px solid #cccccc;
    padding-left: 5px;
}
#f_c2 form button{
    width: 120px;
    height:28px;
    background: #999;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    text-align: center;
    margin-top: 6px;
    font-size: 14px;
}
.bg{
    width: 13px;
    height: 153px;
    margin-top: 10px;
    background: url(../images/orderline.jpg);
    float: left;
}
#f_c3{
    width: 230px;
    height: 170px;
    float: left;
}
.f_c3c{
    width: 180px;
    height: 130px;
    margin: 20px auto;
}
.f_c3c p{
    font-size: 16px;
    margin-bottom: 10px;
}
.f_c3c img{
    width: 80px;
    height: 80px;
    margin-right: 10px;
    float: left;
}
.f_c3c span{
    font-size: 12px;
}
#f_c4{
    width: 230px;
    height: 170px;
    float: left;
}
#f_c5{
    width: 1100px;
    margin: 40px auto;
    font-size: 14px;
    color:#fff;
}